﻿@{
    ViewBag.Title = "店铺列表";
}

<div class="row">
    <div class="col-xs-12">
        <p>
            <div class="row">
                <div class="col-sm-6">
                    <div class="input-group-btn">
                        服务商
                        <select id="query-business"></select>
                        店铺
                        <select id="query-station"></select>
                        状态:
                        <select id="query-status">
                            <option value="1" selected="selected">正常</option>
                            <option value="2">已禁用</option>
                            <option value="3">已删除</option>
                        </select>
                        <button class="btn btn-sm btn-primary" id="btnNew4B">
                            <i class="icon-plus bigger-110"></i>创建员工
                        </button>
                        <button class="btn btn-sm btn-danger" id="btnDelete">
                            <i class="icon-remove bigger-110"></i>删除
                        </button>
                    </div>
                </div>
                <div class="col-sm-6 right">
                </div>
            </div>
        </p>
        <div class="table-responsive">
            <table id="businessTable" class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll" /></th>
                        <th>账号</th>
                        <th>名称</th>
                        <th>联系电话</th>
                        <th>邮箱</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="newModal" tabindex="-1" role="dialog"
     aria-labelledby="newModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:60%;">
        <div class="modal-content">
            <div class="modal-header">
                @*<button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>*@
                <h4 class="modal-title" id="newModalLabel">
                    创建管理员
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="formNew">
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="newName">名称</label>
                        <div class="col-sm-4">
                            <input type="text" id="newName" placeholder="输入名称..." class="col-xs-12 col-sm-12" />
                        </div>
                        <label class="col-sm-2 control-label no-padding-right" for="newAccount">账号</label>
                        <div class="col-sm-4">
                            <input type="text" id="newAccount" placeholder="输入账号..." class="col-xs-12 col-sm-12" />
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="newGender"> 性别 </label>
                        <div class="col-sm-4">
                            <select id="newGender" class="col-xs-12 col-sm-12">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="newIdNumber">身份证</label>
                        <div class="col-sm-4">
                            <input type="text" id="newIdNumber" placeholder="输入身份证..." class="col-xs-12 col-sm-12" />
                        </div>
                        <label class="col-sm-2 control-label no-padding-right" for="newTelephone">联系电话</label>
                        <div class="col-sm-4">
                            <input type="text" id="newTelephone" placeholder="输入联系电话..." class="col-xs-12 col-sm-12" />
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="newPassword"> 密码 </label>
                        <div class="col-sm-4">
                            <input type="password" id="newPassword" class="col-xs-12 col-sm-12" />
                        </div>
                        <label class="col-sm-2 control-label no-padding-right" for="newRePassword"> 密码确认 </label>
                        <div class="col-sm-4">
                            <input type="password" id="newRePassword" class="col-xs-12 col-sm-12" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary" id="btnSubmitNew">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="newModal4B" tabindex="-1" role="dialog"
     aria-labelledby="newModal4BLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:60%;">
        <div class="modal-content">
            <div class="modal-header">
                @*<button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>*@
                <h4 class="modal-title" id="newModal4BLabel">
                    创建服务商管理员
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="formNew4B">
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="newName4B">名称</label>
                        <div class="col-sm-4">
                            <input type="text" id="newName4B" placeholder="输入名称..." class="col-xs-12 col-sm-12" />
                        </div>
                        <label class="col-sm-2 control-label no-padding-right" for="newAccount4B">账号</label>
                        <div class="col-sm-4">
                            <input type="text" id="newAccount4B" placeholder="输入账号..." class="col-xs-12 col-sm-12" />
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="newGender4B"> 性别 </label>
                        <div class="col-sm-4">
                            <select id="newGender4B" class="col-xs-12 col-sm-12">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                        <label class="col-sm-2 control-label no-padding-right" for="newBusiness4B"> 服务商 </label>
                        <div class="col-sm-4">
                            <select id="newBusiness4B" class="col-xs-12 col-sm-12"></select>
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="newIdNumber4B">身份证</label>
                        <div class="col-sm-4">
                            <input type="text" id="newIdNumber4B" placeholder="输入身份证..." class="col-xs-12 col-sm-12" />
                        </div>
                        <label class="col-sm-2 control-label no-padding-right" for="newTelephone4B">联系电话</label>
                        <div class="col-sm-4">
                            <input type="text" id="newTelephone4B" placeholder="输入联系电话..." class="col-xs-12 col-sm-12" />
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="newPassword4B"> 密码 </label>
                        <div class="col-sm-4">
                            <input type="password" id="newPassword4B" class="col-xs-12 col-sm-12" />
                        </div>
                        <label class="col-sm-2 control-label no-padding-right" for="newRePassword4B"> 密码确认 </label>
                        <div class="col-sm-4">
                            <input type="password" id="newRePassword4B" class="col-xs-12 col-sm-12" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary" id="btnSubmitNew4B">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
@section inlineScript
{
    <script type="text/javascript">
        var oTable = null;
        var g_businessArray = null;
        var g_promise = new Promise();
        $(document).ready(function () {
            $('#com-search-input').bind('keypress', function (event) {
                if (event.keyCode == "13") {
                    queryAdvertisementList();
                }
            });
            $('#com-search-icon').on('click', function () {
                queryAdvertisementList();
            });
            $('#query-status').on('change', function () {
                queryAdvertisementList();
            });
            $('#query-business').on('change', function () {
                queryStationList();
            });
            $('#query-station').on('change', function () {
                queryAdvertisementList();
            });
            $('#newBusiness4B').on('change', function () {
                queryStationList4B();
            });

            $('#selectAll').on('change', function () {
                $('input[name=selectItem]').each(function (index, element) {
                    if (element.checked) {
                        $(element).prop('checked', false);
                    } else {
                        $(element).prop('checked', true);
                    }
                });
            });
            $('#btnDelete').on('click', function () {
                var idArray = [];
                $('input[name=selectItem]').each(function (index, element) {
                    if (element.checked) {
                        idArray.push($(element).attr('data-id'));
                    }
                });
                onDeleteMany(idArray);
            });
            $('#btnNew').on('click', function () {
                $('#newModal').modal({});
            });
            $('#btnNew4B').on('click', function () {
                $('#newModal4B').modal({});
            });
            $('#btnSubmitNew').on('click', function () {
                var staff = {};
                staff.Name = $('#newName').val();
                staff.Account = $('#newAccount').val();
                staff.Password = $('#newPassword').val();
                if (!staff.Password || staff.Password != $('#newRePassword').val()) {
                    alert('密码不匹配!');
                    return;
                }
                staff.Gender = $('#newGender').val();
                staff.Telephone = $('#newTelephone').val();
                staff.IdNumber = $('#newIdNumber').val();

                $.ajax({
                    type: "POST",
                    url: "@Url.Content("~/api/asms/Create/AdminStaff")",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(staff),
                    success: function (data) {
                        if (data.isSuccess) {
                            alert('创建成功');
                            $('#newModal').modal('hide');
                            queryAdvertisementList();
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function (data) {
                        alert('error');
                    }
                });
            });
            $('#btnSubmitNew4B').on('click', function () {
                if (window.confirm('是否要创建服务商管理员?') == false)
                    return;
                var staff = {};
                staff.Name = $('#newName4B').val();
                staff.Account = $('#newAccount4B').val();
                staff.Password = $('#newPassword4B').val();
                if (!staff.Password || staff.Password != $('#newRePassword4B').val()) {
                    alert('密码不匹配!');
                    return;
                }
                staff.Gender = $('#newGender4B').val();
                staff.Telephone = $('#newTelephone4B').val();
                staff.IdNumber = $('#newIdNumber4B').val();
                staff.BusinessId = $('#newBusiness4B').val();

                $.ajax({
                    type: "POST",
                    url: "@Url.Content("~/api/asms/Create/AdminStaff")",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(staff),
                    success: function (data) {
                        if (data.isSuccess) {
                            alert('创建成功');
                            $('#newModal4B').modal('hide');
                            queryAdvertisementList();
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function (data) {
                        alert('error');
                    }
                });
            });

            queryBusinessList().then(queryStationList).then(queryAdvertisementList);
        });

        function queryBusinessList() {
            $.ajax({
                url: "@Url.Content("~/API/ASMS/Query/BusinessPagedList")",
                data: { "filter": null, "status": 1, 'start': 0, 'limit': 9999 },
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.isSuccess) {
                        g_businessArray = result.data.items;
                        $('#newBusiness4B option').remove();
                        for (var index = 0; index < g_businessArray.length; index++) {
                            $('#newBusiness4B').append('<option value="' + g_businessArray[index].id + '">' + g_businessArray[index].name + '</option>');
                        }

                        $('#query-business option').remove();
                        for (var index = 0; index < result.data.items.length; index++) {
                            var business = result.data.items[index];
                            $('#query-business').append('<option value="' + business.id + '">' + business.name + '</option>');
                        }
                        g_promise.resolve();
                    } else {
                        g_promise.reject();
                    }
                },
                error: function (msg) {
                    g_promise.reject();
                }
            });
            return g_promise;
        };

        function queryStationList() {
            $.ajax({
                url: "@Url.Content("~/API/ASMS/Query/StationPagedList")",
                data: { "filter": null, 'businessId': $('#query-business').val(), "status": 1, 'start': 0, 'limit': 9999 },
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.isSuccess) {
                        $('#query-station option').remove();
                        $('#query-station').append('<option value="">全部</option>');
                        for (var index = 0; index < result.data.items.length; index++) {
                            var station = result.data.items[index];
                            $('#query-station').append('<option value="' + station.id + '">' + station.name + '</option>');
                        }
                        g_promise.resolve();
                    } else {
                        g_promise.reject();
                    }
                },
                error: function (msg) {
                    g_promise.reject();
                }
            });
            return g_promise;
        };

        function queryAdvertisementList() {
            if (oTable) {
                oTable.fnClearTable();
            }
            oTable = $("#businessTable").dataTable({
                bRetrieve: true,
                "bLengthChange": false, //改变每页显示数据数量
                "iDisplayLength": 20,
                "bFilter": false, //过滤功能
                "bProcessing": false, // 是否显示取数据时的那个等待提示
                "bServerSide": true,//这个用来指明是通过服务端来取数据
                "sAjaxSource": "@Url.Content("~/API/ASMS/Query/StaffPagedList")",//这个是请求的地址
                "fnServerData": retrieveData, // 获取数据的处理函数
                "aoColumns": [
                    {
                        //"sTitle": "Name",
                        "sWidth": '40px',
                        mData: null,
                        bSortable: false,
                        "mRender": function (data, type, full) {
                            return '<input type="checkbox" name="selectItem" data-id="' + full.id + '"/>';
                        }
                    },
                    {
                        mData: "account",
                        bSortable: false
                    },
                    {
                        mData: "name",
                        bSortable: false
                    },
                    {
                        mData: "telephone",
                        bSortable: false
                    },
                    {
                        mData: "eMail",
                        bSortable: false
                    },
                    {
                        bSortable: false,
                        mData: "status",
                        mRender: function (data, type, full) {
                            if (data == 1) {
                                return "正常";
                            } else if (data == 2) {
                                return "已禁用";
                            } else if (data == 3) {
                                return "已删除";
                            }
                            return 'unknown';
                        }
                    },
                    {
                        //"sTitle": "Operation",
                        mData: null,
                        "sWidth": '200px',
                        bSortable: false,
                        "mRender": function (data, type, full) {
                            return '<a href="javascript:void(0)" onclick="onDelete(this);" data-id="' + full.id + '">删除</a>';
                        }
                    }
                ]
                //,"aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3] }]
            });
        }

        // 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
        function retrieveData(sSource, aoData, fnCallback) {
            var businessId = $('#query-business').val();
            if (!businessId) {
                return;
            }
            var stationId = $('#query-station').val();
            //if (!stationId) {
            //    return;
            //}
            var start = 0;
            var limit = 0;
            var propertyNames = new Array();
            var sortIndex = 0;
            var sortDirection;
            for (var index = 0; index < aoData.length; index++) {
                if (aoData[index].name == 'iDisplayStart') {
                    start = aoData[index].value;
                } else if (aoData[index].name == 'iDisplayLength') {
                    limit = aoData[index].value;
                } else if (aoData[index].name.indexOf('mDataProp_') == 0) {
                    propertyNames.push(aoData[index].value);
                } else if (aoData[index].name.indexOf('iSortCol_') == 0) {
                    sortIndex = aoData[index].value;
                } else if (aoData[index].name.indexOf('sSortDir_') == 0) {
                    sortDirection = aoData[index].value;
                }
            }
            $.ajax({
                url: sSource,//这个就是请求地址对应sAjaxSource
                data: { "filter": $('#com-search-input').val(), 'businessId': businessId, 'stationId': stationId, "status": $('#query-status').val(), 'start': start, 'limit': limit },
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.isSuccess) {
                        fnCallback({
                            sEcho: aoData[0].value,
                            iTotalRecords: result.data.total,
                            iTotalDisplayRecords: result.data.total,
                            aaData: result.data.items
                        });
                    }
                },
                error: function (msg) {
                }
            });
        }

        function onDelete(el) {
            var id = $(el).attr('data-id');  // save
            if (!id) {
                return;
            }
            if (window.confirm("是否要删除广告?")) {
                $.ajax({
                    type: "POST",
                    url: "@Url.Content("~/api/apms/advertisement/delete")",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({ 'id': id }),
                    success: function (data) {
                        if (data.isSuccess) {
                            queryAdvertisementList();
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function (data) {
                        alert('error');
                    }
                });
            }
        };
        function onDeleteMany(idArray) {
            if (idArray == null || idArray.length == 0)
                return;
            if (window.confirm("是否要删除选中的广告?")) {
                $.ajax({
                    type: "POST",
                    url: "@Url.Content("~/api/apms/advertisement/deleteMany")",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({ 'idArray': idArray }),
                    success: function (data) {
                        if (data.isSuccess) {
                            queryAdvertisementList();
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function (data) {
                        alert('error');
                    }
                });
            }
        }
    </script>
}
